<template>
	<view class="v_body">
		<uni-section title="记账" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="备注" name="title">
						<uni-easyinput v-model="baseFormData.title" placeholder="请输入备注" />
					</uni-forms-item>
					<uni-forms-item label="账单类型" required v-model="baseFormData.type" placeholder="请输入备注">
						<radio-group @change="radioChange">
							<label class="radio"><radio  value="1" checked="true" />支出</label>
							<label class="radio"><radio value="2" />收入</label>
						</radio-group>
					</uni-forms-item>
					<uni-forms-item label="时间" name="payTime" required>
						<uni-datetime-picker type="date" :clearIcon="false" v-model="baseFormData.payTime" return-type="timestamp" @maskClick="maskClick"/>
					</uni-forms-item>
					<uni-forms-item label="金额" name="price" required>
						<uni-easyinput v-model="baseFormData.price" type="digit" placeholder="请输入消费金额" />
					</uni-forms-item>
					<uni-forms-item label="分类" name="tid" required>
						<picker class="picker_css" :value="index" :range="typeList" range-key="name" @change="bindPickerChange" >
							<view class="uni-input">{{typeList[index].name}}</view>
						</picker>
					</uni-forms-item>
					<button @click="addBill">记账</button>
				</uni-forms>
			</view>
		</uni-section>
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msg.msgType" :message="msg.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import { getAllTypes } from '../../api/payType.js'
	import { addBill } from '../../api/account.js'
	export default {
		data() {
			return {
				index: 0,
				msg: {},
				baseFormData: {
					uid: this.$utils.getStorage('uid'),
					title: undefined,
					type: 1, // 支出1 收入2
					payTime: undefined,
					price: undefined,
					tid: undefined
				},
				typeList: []
			}
		},
		onLoad() {
			// this.getAllTypes()
		},
		onShow(){
			if(!this.$utils.isLogin()){
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
			this.reasetForm()
			this.getAllTypes()
		},
		methods: {
			getAllTypes(){
				getAllTypes().then(res => {
					if(res.code === 200){
						this.typeList = res.data.list
					}else{
						this.msg = this.$utils.messageError(res.msg)
						this.$refs.message.open()
					}
				})
			},
			addBill(){
				if(this.datavVlidate()){
					this.baseFormData = this.$utils.formatNum(this.baseFormData)
					// this.baseFormData.payTime /= 1000
					this.baseFormData.tid = this.typeList[this.index].tid
					// console.log(this.baseFormData);
					addBill(this.baseFormData).then(res => {
						if(res.code === 200){
							this.msg = this.$utils.messageSuccess(res.msg)
							this.$refs.message.open()
							// 添加成功
							uni.switchTab({
								url: '/pages/account/account'
							});
						}else{
							// 添加失败
							this.msg = this.$utils.messageError(res.msg)
							this.$refs.message.open()
							this.$refs.baseForm.resetFields();
						}
					}).catch(reason => {
						// 其他操作
						showMessage(reason)
					})
				}
			},
			bindPickerChange: function(e) {
			    // console.log('picker发送选择改变，携带值为', e.target.value)
			    this.index = e.target.value
			},
			reasetForm(){
				this.baseFormData = {
					uid: this.$utils.getStorage('uid'),
					title: '',
					type: 1, // 支出1 收入2
					payTime: '',
					price: '',
					tid: 0
				}
				this.index = 0
			},
			radioChange(e){
				this.baseFormData.type = e.detail.value
				// console.log(e.detail.value);
				
			},
			datavVlidate(){
				if(this.baseFormData.payTime == 0){
					this.msg = this.$utils.messageError('请选择消费时间！')
					this.$refs.message.open()
					return false
				}
				if(this.baseFormData.price === "" ){
					this.msg = this.$utils.messageError('请输入消费金额！')
					this.$refs.message.open()
					return false
				}
				if(this.index == 0 ){
					this.msg = this.$utils.messageError('请选择消费分类！')
					this.$refs.message.open()
					return false
				}
				return true
			}
		}
	}
</script>

<style scoped>
.radio{
	margin: 0 10px;
}
</style>
